<!-- 告警中心-告警统计 -->
<template>
    <div class="t-ctn">
        <div class="c-title">
            <span>告警统计</span>
            <div class="line"></div>
        </div>
        <div style="position: absolute;
    right: 48px;
    top: 35px;">
            <el-select v-model="formCheckCfg.systemId" @change="choiceType">
                <el-option
                    v-for="(item,index) in typeOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.systemid">
                </el-option>
            </el-select>
        </div>
        <div class="chart-ctn">
            <div class="demo-form-inline">
                <div class="sub-tabs">
                    <span :class="['sub-tab-item',{'active':currentTabCfg ===1}]" @click="currentTabCfg = 1">7天</span>
                    <span :class="['sub-tab-item',{'active':currentTabCfg ===2}]" @click="currentTabCfg = 2">半个月</span>
                    <span :class="['sub-tab-item',{'active':currentTabCfg ===3}]" @click="currentTabCfg = 3">1个月</span>
                    <span :class="['sub-tab-item',{'active':currentTabCfg ===4}]" @click="currentTabCfg = 4">3个月</span>
                </div>
                <!-- 柱状图 -->
                <div id="chartN" style="height:calc(100% - 42px);width:100%;margin-bottom: 20px;"></div>
            </div>
            <div class="chart-r">
                <el-form
                    ref="formCheckCfg"
                    :inline="true"
                    label-width="80px"
                    label-position="left"
                    :model="formCheckCfgR" style="margin-top: 39px;padding: 0 24px">
                    <el-form-item prop="starttime" label="开始时间">
                        <el-date-picker
                            v-model="formCheckCfgR.starttime"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="endtime" label="结束时间">
                        <el-date-picker
                            v-model="formCheckCfgR.endtime"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleRBar(1)">确定</el-button>
                        <el-button type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 柱状图 -->
                <div id="chartR" style="height:calc(100% - 132px);width:100%;margin-bottom: 20px;"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    require('echarts/theme/macarons') // echarts 主题风格
    import API from "../../../request/api";
    import {sysTime} from '../../../utils/utils'

    export default {
        name: 'AlarmStatistics',
        components: {

        },
        computed: {

        },
        data() {
            return {
                formCheckCfg:{
                    endtime:sysTime(0),
                    starttime:sysTime(-7),
                    systemId: '',
                },
                typeOptions:[],
                currentTabCfg: 1,
                chart: null, // 报表
                options: {
                    color:['rgba(3,195,250,1)'],
                    xAxis: {
                        type: 'category',
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                        axisLine: {
                            show:false,
                            lineStyle: {
                                color: '#fff'
                            },
                        },
                        axisPointer:{
                            label:{
                                color:'rgba(0,228,255,1)',
                                backgroundColor:'rgba(0,0,0,0.8)'
                            }
                        },
                        axisTick:{
                            show: false
                        }
                    },
                    yAxis:[
                        {
                            type: 'value',
                            scale: true,
                            name: '报警数量',
                            axisLine: {
                                show:false,
                                lineStyle: {
                                    color: '#fff'
                                }
                            },
                            axisPointer:{
                                label:{
                                    color:'rgba(0,228,255,1)',
                                    backgroundColor:'rgba(0,0,0,0.8)'
                                }
                            },
                            splitLine: {
                                show:true,
                                lineStyle:{
                                    color:'rgba(0,138,255,0.14)'
                                }
                            },
                            axisTick:{
                                show: false
                            },
                            splitArea:{
                                areaStyle:{
                                    color:'transparent'
                                }
                            }
                        }
                    ],
                    grid: {
                        top: 50,
                        left: '5%',
                        right: '40px',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        padding: [5, 10],
                    },
                    series: []
                }, // 报表参数
                formCheckCfgR:{
                    endtime:'',
                    starttime:'',
                    systemId:''
                },
                starttime:'',
                endtime:'',
                chartR: null, // 右侧报表
                optionsR: {
                    xAxis: {
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show:false,
                            lineStyle: {
                                color: '#fff'
                            },
                        },
                        axisPointer:{
                            label:{
                                color:'rgba(0,228,255,1)',
                                backgroundColor:'rgba(0,0,0,0.8)'
                            }
                        },
                        axisTick:{
                            show: false
                        }
                    },
                    yAxis:[
                        {
                            type: 'value',
                            name: '报警类型',
                            axisLine: {
                                show:false,
                                lineStyle: {
                                    color: '#fff'
                                },
                            },
                            axisPointer:{
                                label:{
                                    color:'rgba(0,228,255,1)',
                                    backgroundColor:'rgba(0,0,0,0.8)'
                                }
                            },
                            splitLine: {
                                show:true,
                                lineStyle:{
                                    color:'rgba(0,138,255,0.14)'
                                }
                            },
                            axisTick:{
                                show: false
                            },
                            splitArea:{
                                areaStyle:{
                                    color:'transparent'
                                }
                            }
                        }
                    ],
                    grid: {
                        top: 50,
                        left: '5%',
                        right: '40px',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        padding: [5, 10],
                    },
                    series: []
                }, // 报表参数
            };
        },
        mounted() {
            // 获取供热系统列表
            this.sourceTarget()
            // 右侧柱状图
            this.handleRBar(0)
        },
        watch: {
            'currentTabCfg':{
                handler(newV,oldV){
                    if(newV === 1){
                        this.formCheckCfg.endtime = sysTime(0);
                        this.formCheckCfg.starttime = sysTime(-7)
                    }
                    if(newV === 2){
                        this.formCheckCfg.endtime = sysTime(0);
                        this.formCheckCfg.starttime = sysTime(-15)
                    }
                    if(newV === 3){
                        this.formCheckCfg.endtime = sysTime(0);
                        this.formCheckCfg.starttime = sysTime(-31)
                    }
                    if(newV === 4){
                        this.formCheckCfg.endtime = sysTime(0);
                        this.formCheckCfg.starttime = sysTime(-90)
                    }
                    this.getChartNumber()
                }
            }
        },
        methods: {
            choiceType(){
                this.getChartNumber();
            },
            // 右侧柱状图,统计类型
            handleRBar(type){

                const that = this
                this.chartR = echarts.init(document.getElementById('chartR'),'macarons');
                if(type === 1){
                    this.starttime = this.moment(this.formCheckCfgR.starttime).format('yyyy-MM-DD HH:mm:ss');
                    this.endtime = this.moment(this.formCheckCfgR.endtime).format('yyyy-MM-DD HH:mm:ss');
                }else if(type === 0){
                    this.starttime = this.moment().startOf('day').format('yyyy-MM-DD HH:mm:ss');
                    this.endtime = this.moment().endOf('day').format('yyyy-MM-DD HH:mm:ss');
                    this.formCheckCfgR.starttime =  this.starttime
                    this.formCheckCfgR.endtime =  this.endtime
                }else{
                    this.formCheckCfgR.starttime =  this.starttime
                    this.formCheckCfgR.endtime =  this.endtime
                }

                API.getAlarmType({starttime:this.starttime,endtime:this.endtime,systemId:this.formCheckCfgR.systemId}).then(res => {
                    if(res.code === 0){
                        that.optionsR.series = []
                        if(res.result && res.result.length > 0){
                            that.optionsR.series.push({
                                name: '报警数量',
                                type: 'bar',
                                barWidth : 20,//柱图宽度
                                itemStyle:  {    // 图形的形状
                                    barBorderRadius: [18, 18, 0 ,0],
                                    color: 'rgba(0,255,255,1)'
                                },
                                data: this.changeEchartData(res.result,'alarmtype','alarmnumber'),
                            })
                            that.chartR.setOption(that.optionsR,true);
                        }else{
                            this.optionsR.series = []
                        }
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                   // this.msgWarning(err);
                });
            },
            changeEchartData(chartData,name,value){
                let seriesData = [];
                chartData.forEach(item=>{
                    let outObj = [item[name],item[value]];
                    seriesData.push(outObj);
                });
                return seriesData
            },
            // 左侧告警数量统计
            getChartNumber(){

                this.options.series = []
                const  that = this
                this.chart = echarts.init(document.getElementById('chartN'),'macarons');
                API.getAlarmNumbers(this.formCheckCfg).then(res => {
                    if(res.code === 200){
                        if(res.result && res.result.length > 0){
                            this.options.series.push({
                                name: '报警数量',
                                type: 'bar',
                                barWidth : 20,//柱图宽度
                                itemStyle: {    // 图形的形状
                                    barBorderRadius: [18, 18, 0 ,0],
                                    color: 'rgba(3,195,250,1)',
                                },
                                data: this.changeEchartData(res.result,'time','alarmnumber'),
                            })
                        }else{
                            this.options.series = []
                        }

                        this.chart.setOption(this.options,true);

                        this.chart.on('click',function (params) {
                            that.starttime =  that.moment(params.name, "YYYYMMDD").startOf('day').format('yyyy-MM-DD HH:mm:ss')
                            that.endtime =  that.moment(params.name, "YYYYMMDD").endOf('day').format('yyyy-MM-DD HH:mm:ss')
                            that.handleRBar(2)
                        });
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                    //this.msgWarning(err);
                });
            },
            // 供热系统列表
            sourceTarget(){
                API.sourceTarget().then(res => {
                    if(res.code === 0){
                        this.typeOptions = res.result;
                        if(res.result.length > 0){
                            this.formCheckCfg.systemId = res.result[0].systemid
                            this.formCheckCfgR.systemId = res.result[0].systemid
                            this.getChartNumber();
                        }
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                   // this.msgWarning(err);
                });
            }
        }
    };
</script>

<style lang="scss" type="text/scss" scoped>
    .t-ctn {
position: relative;
        .chart-ctn{
            display: flex;
            height: calc(100% - 108px);
            margin-right: 42px;
            margin-left: 46px;

            >div{
                flex: 1;
                margin:20px 0;
            }

            .demo-form-inline {
                font-size: 16px;
                text-align: left;

                .sub-tabs {
                    color: #00e4ff;

                    .sub-tab-item {
                        width: 97px;
                        height: 42px;
                        text-align: center;
                        line-height: 42px;
                        border: 1px solid #008aff;
                        display: inline-block;
                        cursor: pointer;

                        &:first-child {
                            border-radius: 5px 0 0 0;
                        }

                        &:last-child {
                            border-radius: 0 5px 0 0;
                        }

                        &.active {
                            background: #156fcb;
                            border: 1px solid #008aff;
                            color: #ffffff;
                        }
                    }
                }
            }


            .chart-r{
                background: rgba(3,59,117,0.86);
                border: 1px solid #008aff;
                border-radius: 5px;

                ::v-deep .el-form--inline{
                    flex-wrap: nowrap;
                }
            }
        }
    }
</style>
